<template>
  <div class="articles-container">
    <el-card class="box-card">
      <!-- header头部 -->
      <el-form
        :inline="true"
        :model="listData"
        class="demo-form-inline"
        ref="formRef"
      >
        <el-form-item
          label="关键字"
          prop="user"
        >
          <el-input v-model="listData.keyword"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listData.state">
            <el-option
              label="已启用"
              value="1"
            ></el-option>
            <el-option
              label="已关闭"
              value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onclear">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleFilter"
          >搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button
            type="success"
            @click="previewVisible = true"
          >新增技巧</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示信息 -->
      <el-alert
        :title="'一共有' + counts + '条数据'"
        type="info"
        show-icon
        id="info-css"
      >
      </el-alert>
      <!-- 表格 -->

      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          width="50"
          type="index"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="250"
        >
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i
              v-if="scope.row.videoURL"
              class="el-icon-video-camera-solid"
              @click="onvideo(scope.row.videoURL)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
        > </el-table-column>
        <el-table-column
          prop="username"
          label="录入人"
        > </el-table-column>
        <el-table-column
          prop="createTime"
          label="录入时间"
        >
          <template slot-scope="scope">
            {{
              scope.row.createTime
                | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
        >
          <template slot-scope="scope">{{
            scope.row.state == 1 ? "已启用" : "未启用"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="operating"
          label="操作"
        >
          <template slot-scope="scope">
            <span class="link-css">
              <el-link
                type="primary"
                @click="onPre(scope.row)"
              >预览</el-link>
            </span>
            <span class="link-css">
              <el-link
                type="primary"
                @click="forbidden(scope.row.state, scope.row.id)"
              >{{ scope.row.state == 0 ? "启用" : "禁用" }}</el-link>
              <!-- <el-link type="primary"  @click="forbidden">{{
                scope.row.state == 1 ? "启用" : "禁用"
              }}</el-link> -->
            </span>
            <span class="link-css">
              <el-link
                type="primary"
                @click="edit(scope.row)"
                :disabled="scope.row.state == 1"
              >修改</el-link>
            </span>
            <span class="link-css">
              <el-link
                type="primary"
                @click="open(scope.row.id)"
                :disabled="scope.row.state == 1"
              >删除</el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <PageTool
          :paginationPage="listData.page"
          :paginationPagesize="listData.pagesize"
          :total="counts"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        ></PageTool>
      </div>
    </el-card>
    <!-- dia弹框 -->
    <el-dialog
      title="视频"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <video
        :src="videourl"
        controls
        autoplay
        class="video"
        width="100%"
      ></video>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增文章"
      :visible.sync="previewVisible"
      width="60%"
    >
      <articles-Add
        ref="articlesAdd"
        @form-str="onfor"
        @from-rules="oni"
        v-if="previewVisible"
      />

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="previewVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="previewOk"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览对话框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="diaVisible"
      width="80%"
    >
      <div>
        <div class="prew">
          <h3>{{ preStr.title }}</h3>
          <span class="prewStyle">{{
            preStr.createTime | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")
          }}</span>
          <span class="prewStyle">{{ preStr.username }}</span>
          <i class="el-icon-view"></i>
          <span class="prewStyle">{{ preStr.visits }}</span>
        </div>
        <div class="prewBody">
          <span v-html="preStr.articleBody"></span>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="diaVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="diaVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改文章"
      :visible.sync="editVisible"
      width="60%"
    >
      <articles-Preview
        ref="articlesPreview"
        :title="editStr.title"
        :body="editStr.articleBody"
        @edit-str="editFrom"
        @edit-rules="editRules"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editClick(editStr)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PageTool from './../components/page-tool'
import { list, add, remove, changeState, update } from '@/api/hmmm/articles'
import articlesAdd from '../components/articles-add'
import articlesPreview from '../components/articles-preview'

export default {
  components: {
    PageTool,
    articlesAdd,
    articlesPreview
  },

  data() {
    return {
      tableData: [],
      listData: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      total: null,
      counts: 0,
      dialogVisible: false,
      videourl: '',
      previewVisible: false,
      ruleForm: {
        articleBody: ''
      },
      rules: '',
      diaVisible: false,
      preStr: '',
      editVisible: false,
      editStr: '',
      editTitle: '',
      editBody: '',
      editVideo: '',
      editxxRules: ''

      // exchange: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    editRules(val) {
      this.editxxRules = val
    },
    editFrom(al) {
      this.editTitle = al.title
      this.editBody = al.msg
      this.editVideo = al.videoURL
      // console.log(this.editTitle)
    },

    edit(val) {
      this.editVisible = true
      this.editStr = val
      // console.log(this.editStr.title)
    },

    onfor(val) {
      this.ruleForm = val
      // console.log(this.ruleForm)
    },
    onPre(val) {
      this.diaVisible = true
      // console.log(val)
      this.preStr = val
    },
    oni(v) {
      this.rules = v
      console.log('rule', this.rules)
    },
    onclear() {
      this.listData.keyword = null,
        this.listData.state = null
    },
    async getList() {
      try {
        const { data } = await list(this.listData)
        console.log(data)
        this.counts = data.counts
        this.tableData = data.items
      } catch (error) { }
    },
    handleSizeChange(val) {
      this.listData.pagesize = val
      if (this.listData.page === 1) {
        this.getList(this.listData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.listData.page = val
      this.getList()
    },
    handleFilter() {
      this.listData.page = 1
      this.getList()
    },
    onvideo(url) {
      this.dialogVisible = true
      this.videourl = url
    },
    // 添加功能
    async previewOk() {
      this.$refs.articlesAdd.$refs.ruleForm.validate(async (valid) => {
        console.log(this.rules)
        if (!valid) {
          return this.$message.error('请填按需求填写内容')
        }
        console.log(this.ruleForm.articleBody)
        if (this.ruleForm.articleBody === '') {
          return this.$message.error('文章内容不能为空')
        }
        try {
          await add(this.ruleForm)
          this.$message.success('添加成功')

          this.previewVisible = false
          this.getList()
        } catch (error) {
          this.$message.error('添加失败')
        }
      })
    },
    // 删除功能
    async open(id) {
      // this.delID = id
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      try {
        await remove({ id })

        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 状态变化
    async forbidden(state, id) {
      var f = state ? 0 : 1

      try {
        await changeState({
          state: f,
          id: id
        })
        this.$message.success('修改成功')
        this.getList()
      } catch (error) {
        this.$message.error('修改失败')
      }
    },
    // 修改
    async editClick(edit) {
      this.$refs.articlesPreview.$refs.eidtFrom.validate(async (valid) => {
        console.log(this.rules)
        if (!valid) {
          return this.$message.error('请填按需求填写内容')
        }
        console.log(this.editBody)
        if (this.editBody === '') {
          return this.$message.error('文章内容不能为空')
        }
        // this.id = editId.id
        console.log(edit)
        try {
          await update({
            id: edit.id,
            title: this.editTitle,
            articleBody: this.editBody,
            videoURL: this.editVideo
          })
          this.$message.success('修改成功')
          this.editVisible = false
          this.getList()
        } catch (error) {
          this.$message.error('修改失败')
        }
      })
    }
  }
}

// tite: this.editTitle,
// articleBody: this.editBody,
// videoURL: this.editVideo
</script>

<style scoped lang='less'>
#info-css {
  margin-bottom: 20px;
}
.link-css {
  margin-right: 5px;
}
.pagination {
  float: right;
  margin: 20px;
}
i {
  cursor: pointer;
}
.prew {
  border-bottom: 1px dashed #ccc;
}
.prewStyle {
  text-align: center;
  line-height: 30px;
  padding: 0 20px 10px 0;
}
.prewBody {
  background-color: #f5f5f5;
}
</style>
